<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>GoodsDetail</title>
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery.i18n.properties.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/util.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer/layer.js"></script>
    <style type="text/css">
        .swiper-container {
            /*width: 100%;*/
            height: 20rem;
        }

        .swiper-container img {
            width: 100%;
            height: 100%;
        }

        .swiper-button-next, .swiper-button-prev {
            width: 1.875rem;
            height: 1.875rem;
            background-size: 1.25rem 2.5rem;
        }

        .swiper-pagination-bullet-active {
            background-color: #E06567;
        }

        .lunbo {
            margin-top: 10px;
        }

        .miaoshu-box .titles {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price-row1 {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #CCCCCC;
        }

        .price-box .price,.kucun {
            color: #E06567;
            font-size: 1.8rem;
            font-weight: bold;
            text-decoration:line-through
        }

        .currency-box .currency-tips {
            background-color: #E06567;
            padding: 0.625rem 0.9375rem;
            border-radius: 0.625rem;
            color: white;
        }

        .container {
            background-color: #FDFFFE;
        }

        .price-row2 {
            padding: 1.625rem;
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #CCCCCC;
        }

        .price-row2 .jian, .price-row2 .jia {
            width: 3rem;
            height: 3rem;
            border-radius: 3rem;
            text-align: center;
            border: 1px solid #CCCCCC;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .price-row2 input {
            border: 0.0625rem solid #CCCCCC;
            border-radius: 2.25rem;
            padding: 0.5125rem 0rem;
            text-align: center;
            width: 13.5rem;
        }

        .price-row2 .Quantity {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .jian {
            background: #f1f3f2;
            font-weight: bold;
        }

        .price-row2 .jia {
            background-color: #E9ebea;
            color: #E06567;
            font-weight: bold;
        }

        .price-row3 {
            padding: 0.625rem 0.3125rem;
        }

        .price-row3 .title {
            text-align: center;
            font-size: 1.125rem;
            font-weight: bold;
        }

        .price-row3 .item {
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 2.25rem;
            background-color: #DB2227;
            text-align: center;
        }

        .price-row3 .dis {
            background-color: white;
            color: #111111;
            border: 1px solid #CCCCCC;
        }

        .price-row3 .row {
            margin-bottom: 0.625rem;
        }

        .quotation-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid #CCCCCC;
        }

        .quotation-box .quotation {
            color: white;
            background-color: #053f88;
            border-radius: 1.875rem;
            padding: 0.925rem 0.9375rem;
            margin-right: 1.25rem;
        }

        .quotation-box .like {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 2.5rem;
            border: 1px solid #CCCCCC;
        }

        .product-box .title {
            border-bottom: 1px solid #CCCCCC;
        }

        .conpany .seller {
            background-color: #DB2227;
            padding: 0.625rem 0.625rem;
            border-radius: 2.25rem;
            color: white;
            text-align: center;
        }

        .conpany .row {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tuijian {
            height: auto;
            margin-top: 1.25rem;
        }

        /* 商品列表的样式 */
        .goods-item {
            border: 0.125rem #C0C0C0 solid;
            padding: 0.625rem;
            position: relative;
        }

        .jiage-sec {
            display: flex;
            justify-content: space-between;
            font-size: 1rem;
        }

        .goods-item .miaoshu {
            color: #111111;
            padding-top: 10px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .tuijian .col-xs-6, .tuijian .col-xs-3 {
            padding: 0.625rem;
        }

        .select-box {
            padding: 0.625rem;
            display: none;
            background-color: #007AFF;
            z-index: 100;
            position: absolute;
            right: 0rem;
            top: 0rem;
        }

        .select-box .language {
            margin-bottom: 0.3125rem;
        }

        .goods-item .jia::before {
            content: attr(data-content-before);
            color: #d02021;
            font-size: 1.5rem;
        }

        .goods-item .jia {
            color: #d02021;
            font-size: 1.5rem;
        }

        .goods-item .like i {
            font-size: 2rem;
            color: #C0C0C0;
        }

        .changjia {
            border: 0.125rem #C0C0C0 solid;
            padding: 0.625rem;
            border-top: none;
        }

        .changjia .search-box {
            width: 3.05rem;
            height: 3.05rem;
            background-color: #CCCCCC;
            border-radius: 2.5rem;
            text-align: center;
        }

        .chang-logo {
            border-radius: 2.5rem;
            border: 0.125rem solid #CCCCCC;
            text-align: center;
            width: 3.05rem;
            height: 3.05rem;
            margin-left: 0.625rem;
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .new-logo {
            position: absolute;
            left: 0rem;
            top: 0rem;
        }

        .changjia p {
            color: #1e4e72;
            font-weight: bold;
        }

        .online-msg {
            width: 4.25rem;
            height: 4.25rem;
            z-index: 100;
            text-align: center;
            background-color: lightseagreen;
            border-radius: 4.25rem;
            position: fixed;
            bottom: 1.25rem;
            right: 1.25rem;
            /*display: flex;*/
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        /* 付款 */
        .online-pay {
            width: 4.25rem;
            height: 4.25rem;
            z-index: 100;
            background-color: lightseagreen;
            border-radius: 4.25rem;
            text-align: center;
            position: fixed;
            bottom: 1.25rem;
            right: 18%;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 8px;
        }

        .chat-box {
            padding: 10px 0px;
            position: fixed;
            z-index: 100;
            padding: 0px 20px;
            bottom: 0px;
            left: 0px;
            background-color: rgb(248, 248, 248);
            width: 100%;
            height: 400px;
            display: none;
            -webkit-overflow-scrolling: touch; /* 可以让页面在Native端滚动时模拟原生的弹性滚动效果  */
        }

        .chat-list {
            height: 90%;
            overflow: auto;
            border-bottom: 1px solid #f0f0f0;
        }

        .inputdiv {
            display: flex;
            justify-content: space-between;
            height: 10%;
        }

        .chat-input .inputdiv input[type='text'] {
            width: 90%;
            border: none;
        }

        .chat-box .close {
            position: absolute;
            right: 0px;
            top: 0px;
            color: orangered;
        }

        .chat-box .seller {
            display: flex;
            justify-content: flex-start;
            position: relative;
            margin-left: 10px;
        }

        .chat-list .sys {
            text-align: center;
            color: #111111;
        }

        .chat-box .time{
            text-align: center;
            font-size: 12px;
        }

        .chat-list .sys {
            text-align: center;
            color: #111111;
        }

        /*.chat-box .seller::before{*/
        /*	content: attr(data-before);*/
        /*	font-weight: bold;*/
        /*	position: absolute;*/
        /*	top:50%;*/
        /*	left: -40px;*/
        /*	margin-top: -15px;*/
        /*}*/
        .chat-box .seller-conent::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
            left: -10px;
            margin-top: -10px;
            border-top: 5px solid transparent;
            border-right: 10px solid #3a8ee6;
            border-bottom: 5px solid transparent;
        }
        .tuijian .goods-item{
            cursor: pointer;
        }
        .chat-box .me {
            display: flex;
            justify-content: flex-end;
            position: relative;
            margin-right: 10px;
        }

        /*.chat-box .me::after {*/
        /*    font-weight: bold;*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    right: -25px;*/
        /*    margin-top: -15px;*/
        /*}*/

        .chat-box .me-content::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
            right: -10px;
            margin-top: -10px;
            border-top: 5px solid transparent;
            border-left: 10px solid white;
            border-bottom: 5px solid transparent;
        }

        .chat-box .me-content {
            max-width: 90%;
            padding: 10px;
            display: inline-block;
            background-color: white;
            border-radius: 5px;
            text-align: left;
            margin-bottom: 10px;
        }

        .chat-box .seller-conent {
            max-width: 90%;
            padding: 10px;
            display: inline-block;
            background-color: #3a8ee6;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .tuijian .lunimg {
            height: 130px;
            width: 130px;
        }

        .tuijianHead {
            border-left: 5px solid red;
            padding-left: 5px;
            font-weight: bold;
        }

        .Features img {
            max-width: 100%;
            display: block;
            margin: auto;
        }
        .guigebox{
            display: flex;
            padding: 10px;
        }
        .guige-item{
            display: flex;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }
        .guigebox .guige-tu img{
            width: 20px;
            height: 20px;
        }
        .guigebox .guige{
            color: #111111;
        }
        .guigebox .active{
            border-color: red;
        }
        .goods-item .lunimg{
            display: block;
            margin: auto;
        }
        .qiang-box .shijia-box{
            /*text-decoration: line-through;*/
        }
        .qiang-box{
            display: flex;
        }
        .putong-box{
            display: none;
        }
        .qiang-box .currency{
            margin-top: 5px;
            font-size: 16px;
            font-weight: bold;
            color: #E06567;
        }
        .putong-box .currency{
            margin-top: 15px;
            font-size: 16px;
            font-weight: bold;
            color: #E06567;
        }
        .pingpai a{
            font-size: 15px;
        }
        .layui-layer-title{
            display: none !important;
        }
        .layui-layer-page{
            background-color: rgba(255,0,0,0) !important;
        }
        @media screen and (min-width: 1000px) {
            .chat-box {
                width: 600px;
                left: 50%;
                margin-left: -300px;
            }
            .topbg{
                width: 600px;
            }
            footer{
                width: 600px;
                margin: auto;
                margin-top: 20px;
            }
            .online-msg {
                right: 30%;
            }
            .tuijian .lunimg {
                height: 200px;
                width: 200px;
            }
            .search-sec{
                width: 600px;
            }
        }
    </style>
</head>
<body class="zh">
<div class="container-fluid topbg">
    <div style="display: flex;justify-content: flex-start;float: left;margin-left: 8px">
        <img src="img/fanhui.png" style="width: 20px;height: 20px" onclick="fanhui()">
    </div>
    <div class="flex pull-right">
        <div class="language">
            <img src="img/yingguo.png" class="guoqi">
            <span>ENG</span>
        </div>
        <div>
            <a href="login.html" class="loginBtn" data-lang="login">登录</a>
        </div>
        <div class="select-box">
            <div class="language">
                <img src="img/zhongguo.png" class="guoqi">
                <span>中文</span>
            </div>
            <div class="language">
                <img src="img/yingguo.png" class="guoqi">
                <span>EN</span>
            </div>
            <div class="language">
                <img src="img/taiguo.png" class="guoqi">
                <span>ภาษาไทย</span>
            </div>
            <div class="language">
                <img src="img/jianpuzhai.webp" class="guoqi" >
                <span>កម្ពុជា។</span>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid search-sec">
    <div><img src="img/logo.png"></div>
    <div>
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false" data-lang="index_product">Product <span class="caret"></span></button>
                <!--						<ul class="dropdown-menu">-->
                <!--							<li><a href="#">Action</a></li>-->
                <!--							<li><a href="#">Another action</a></li>-->
                <!--							<li><a href="#">Something else here</a></li>-->
                <!--							<li role="separator" class="divider"></li>-->
                <!--							<li><a href="#">Separated link</a></li>-->F
                <!--						</ul>-->
            </div><!-- /btn-group -->
            <input type="text" class="form-control searchName" aria-label="...">
            <div class="input-group-btn">
                <button type="button" class="btn sch-btn-right searchBtn"><span class="glyphicon glyphicon-search"
                                                                                style="color: white;"></span></button>
            </div>
        </div><!-- /input-group -->
    </div>
<!--    <div class="diandian">-->
<!--        <span class="glyphicon glyphicon-option-horizontal" style="color: white;"></span>-->
<!--    </div>-->
</div>
<!-- 轮播 -->
<div class="swiper-container lunbo container">
    <div class="swiper-wrapper">
        <!--		        <div class="swiper-slide"><img src="img/goods1.jpg" ></div>-->
        <!--		        <div class="swiper-slide"><img src="img/goods2.jpg" ></div>-->
        <!--		        <div class="swiper-slide"><img src="img/goods3.jpg" ></div>-->
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev swiper-button-black"></div>
    <div class="swiper-button-next swiper-button-black"></div>
</div>
<div class="container">
    <div class="miaoshu-box">
        <h3 class="titles">China's pledge to help other countries with green energy while ceasing to build new
            coal-fired power projects abroad will help other developing nations in Asia reduce their dependence on coal
            and meet their commitment to cut carbon emissions, analysts said.</h3>
        <p class="miaoshu">China's pledge to help other countries with green energy while ceasing to build new
            coal-fired power projects abroad will help other developing nations in Asia reduce their dependence on coal
            and meet their commitment to cut carbon emissions, analysts said.</p>
    </div>
    <div class="price-row1 qiang-box">
        <div class="price-box">
            <div class="price-tips" data-lang="original_price">Original price</div>
            <div > <span data-lang="huobi">$</span><span class="price zongjia">0.00</span></div>
        </div>
        <div class="currency-box">
            <div class="shijia-box">
                <span class="shijia-tips" data-lang="shijia">市场价</span>
                <span data-lang="huobi">$</span><span class="shijia">0.00</span>/ <span data-lang="unit" class="unit">Unit</span>
            </div>
            <div class="currency">
                <span class="price-tips" data-lang="qiangjia">抢购价</span>
                <span data-lang="huobi">$</span><span class="price">0.00</span>/ <span data-lang="unit" class="unit2" id="unit2">Unit</span>
            </div>
            <div class="currency" id="tehuijiadiv" style="display: none">
                <span class="price-tips" data-lang="qiangjia">特惠价</span>
                <span data-lang="huobi">$</span><span class="price3">0.00</span>/ <span data-lang="unit" class="unit3" id="unit3">Unit</span>
            </div>
        </div>
    </div>
    <div class="price-row1 putong-box">
        <div class="price-box">
            <div class="price-tips" data-lang="original_price">Original price</div>
            <div > <span data-lang="huobi">$</span><span class="price zongjia">240.00</span></div>
        </div>
        <div class="currency-box">
            <div class="currency">
                <span class="price-tips" data-lang="shijia">市场价</span>
                <span data-lang="huobi">$</span><span class="shijia">240.00</span>/ <span data-lang="unit" class="unit">Unit</span>
            </div>
        </div>
    </div>
    <div class="price-row3 row">
        <h4 data-lang="range" style="padding-left: 10px;">规格</h4>
        <div class="guigebox">
        </div>
    </div>
    <div class="product-box">
        <div class="title">
            <h4 data-lang="pro_detail">Product Details</h4>
        </div>
        <div class="row">
            <div class="col-xs-3" data-lang="category">
                Category
            </div>
            <div class="col-xs-9">
                <div class="fenlei">Accessories,Gems&jewelry>Jewelry>Jewelry</div>
            </div>
        </div>
        <div class="Features">
            <h4 data-lang="feature">Features:</h4>
            <ul>
                <li>Smoky Quartz carving</li>
                <li>23 carat -Silver925</li>
                <li>adjustable length 16,20,24-inch chain</li>
                <li>18k gold plated</li>
            </ul>
        </div>
    </div>

    <!-- 底部推荐商品 -->
    <div class="tuijianHead" data-lang="tuijianHead">推荐商品</div>
    <div class="swiper-container tuijian">
        <div class="swiper-wrapper">
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-black"></div>
        <div class="swiper-button-next swiper-button-black"></div>
    </div>
    <!-- 底部推荐商品 -->
</div>
<!-- 轮播结束 -->

<!-- 在线咨询 -->
<div class="online-msg">
    <img src="/home/img/weixin.png"style="width: 20px;height: 20px;display: block;margin: auto;margin-top: 2px" id="chat" />
    <div id="tishi" style="position: absolute;top: -5px;right: -5px;background-color: red;border-radius: 1rem;padding: 0px 2px;display: none">
        <span style="color: white;font-size: 8px" id="number">0</span>
    </div>
    <span data-lang="chat" style="font-size: 8px;color: white;">聊天</span>
</div>
<div class="online-pay">
    <img src="/home/img/bank_card.png"style="width: 20px;height: 20px;display: block;margin: auto;margin-top: 2px" id="pay"/>
    <span data-lang="pay" style="font-size: 8px;color: white;">付款</span>
</div>
<button id="pic" style="display: none"></button>
<div class="chat-box">
    <div class="chat-list">

    </div>
    <div class="chat-input">
        <div class="inputdiv" id="chat1">
            <input type="text" placeholder="请输入咨询内容" id="inputText1">
            <button style="border: 0px" onclick="pic()" class="layui-btn layui-btn-primary"><img style="width: 30px" src="/home/img/picture.png"></button>
            <input type="button" value="发送" class="btn" onclick="send()">
        </div>
        <div class="inputdiv" id="chat2" style="display: none">
            <input type="text" placeholder="Please enter content" id="inputText2">
            <button  style="border: 0px" onclick="pic()" class="layui-btn layui-btn-primary"><img style="width: 30px" src="/home/img/picture.png"></button>
            <input type="button" value="send" class="btn" onclick="send()">
        </div>
        <div class="inputdiv" id="chat3" style="display: none">
            <input type="text" placeholder="กรุณากรอกเนื้อหาการสอบถาม" id="inputText3">
            <button  style="border: 0px" onclick="pic()" class="layui-btn layui-btn-primary"><img style="width: 30px" src="/home/img/picture.png"></button>
            <input type="button" value="ส่ง" class="btn" onclick="send()">
        </div>
        <div class="inputdiv" id="chat4" style="display: none">
            <input type="text" placeholder="សូមបញ្ចូលខ្លឹមសារនៃសំណួរ" id="inputText4">
            <button  style="border: 0px" onclick="pic()" class="layui-btn layui-btn-primary"><img style="width: 30px" src="/home/img/picture.png"></button>
            <input type="button" value="ส่ง" class="btn" onclick="send()">
        </div>
    </div>
    <div class="close">
        <i class="glyphicon glyphicon-remove-sign"></i>
    </div>
</div>


<!-- 底部介绍 -->
<footer style="padding: 20px 10px">
    <h4 data-lang="index_about">ABOUT</h4>
    <div id="border"></div>
    <div class="pingpai"><a href="/home/pinpai.html" data-lang="pinpaigushi">品牌故事</a></div>
    <div class="about"><a href="/home/lianxiWe.html" data-lang="lianxiwe">联系我们</a></div>
    <div class="weixin" style="margin-top: 10px"><span data-lang="weixin">微信</span>: LfamilyCyhCzx</div>
    <div class="email"><span data-lang="email" >电子邮箱</span>: bocuilian@gmail.com</div>
    <div class="weininfuwu" style="margin: auto;text-align: center"><span data-lang="fuwu" style="font-size: 18px">竭诚为您服务</span></div>
</footer>
</body>
<script type="text/javascript">
    var tishiMessage = null;
    var areaId = ""; //区域id

    function fanhui(){
        window.history.go(-1); //返回上一页
    }

    // 动态设置轮播图的高度
    $(function () {
        let width = $(window).width();
        if(width>1000){
            $(".lunbo").height('27.7rem');
            $(".online-msg").width("5.25rem");
            $(".online-msg").height("5.25rem");
            $(".online-pay").width("5.25rem");
            $(".online-pay").height("5.25rem");
            $(".container").width('600px');
            $("#chat").width("30px");
            $("#chat").height("30px");
            $("#pay").width("30px");
            $("#pay").height("30px");
            $("#chat").next().css('font-size','8px');
            $("#pay").next().css('font-size','8px');
            $(".glyphicon-comment").css("font-size","22px");
        }
    })

    var typeId = '';			// 商品类型id，用于查询推荐商品
    var websocket = null;
    var isHistory = false;	// 是否加载历史
    var timer = null ;      //定时器，心跳包
    var lockReconnect = false;  //避免ws重复连接
    var number = 0;         //没有客服的重连次数
    var upload = layui.upload;
    var userid = "";

    $(function () {
        var n = 0;
        if (localStorage.getItem("yuyan") == 'zh') {
            n = 0;// 中文
            $(".topbg>.flex>.language>img").attr('src', 'img/zhongguo.png');
            $(".topbg>.flex>.language>span").html('中文');
            $("#chat1").show();
            $("#chat2").hide();
            $("#chat3").hide();
            $("#chat4").hide();
        } else if (localStorage.getItem("yuyan") == 'en') {
            n = 1;// 英文
            $(".topbg>.flex>.language>img").attr('src', 'img/yingguo.png');
            $(".topbg>.flex>.language>span").html('EN');
            $("#chat1").hide();
            $("#chat2").show();
            $("#chat3").hide();
            $("#chat4").hide();
        } else if (localStorage.getItem("yuyan") == 'th') {
            n = 2;// 泰语
            $(".topbg>.flex>.language>img").attr('src', 'img/taiguo.png');
            $(".topbg>.flex>.language>span").html('ภาษาไทย');
            $("#chat1").hide();
            $("#chat2").hide();
            $("#chat3").show();
            $("#chat4").hide();
        } else if (localStorage.getItem("yuyan") == 'kh') {
            n = 3;
            $(".topbg>.flex>.language>img").attr('src', 'img/jianpuzhai.webp');
            $(".topbg>.flex>.language>span").html('កម្ពុជា។');
            $("#chat1").hide();
            $("#chat2").hide();
            $("#chat3").hide();
            $("#chat4").show();
        }
        language_pack.loadProperties(n);

        // 切换语言
        $(".topbg>.flex>.language").click(function () {
            $(".select-box").show();
            $(".select-box>.language").click(function () {
                let n = $(this).index();
                if (n == 0)
                    localStorage.setItem("yuyan", 'zh');// 中文
                else if (n == 1)
                    localStorage.setItem("yuyan", 'en');// 英文
                else if (n == 2)
                    localStorage.setItem("yuyan", 'th');// 泰语
                else if (n == 3)
                    localStorage.setItem("yuyan", 'kh');
                $(".topbg>.flex>.language>img").attr('src', $(this).find('img').attr('src'));
                $(".topbg>.flex>.language>span").html($(this).find('span').html());
                language_pack.loadProperties(n);
                window.history.go(0);
                $('.select-box').hide();
            })
        })


        // 加载商品数据
        var gid = getQuery('id');
        $.ajax({
            url: `${host}/goods/getGoodsDetailById?id=${gid}&yuyan=${localStorage.getItem("yuyan")}`,
            type: "get",
            success: function (res) {
                if (res.code == 200) {
                    // 加载轮播图
                    for (let i = 0; i < res.data.goodsPictureList.length; i++) {
                        let s = `<div class="swiper-slide"><img src="${host}/${res.data.goodsPictureList[i].gpicture}" ></div>`;
                        $(".lunbo .swiper-wrapper").append(s);
                    }
                    var mySwiper = new Swiper('.lunbo', {
                        autoplay: true,//可选选项，自动滑动
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                    // 商品名称和描述
                    $(".miaoshu-box .titles").html(res.data.gname);
                    $(".miaoshu-box .miaoshu").html(res.data.gjianjie);
                    $(".price-box .price").html(res.data.originalPrice);
                    $(".currency-box .shijia").html(res.data.gprice);
                    $(".unit").html(res.data.gdanwei);
                    if(res.data.grabPrice==null){   // 如没有抢购价格
                        $(".putong-box").css('display','flex');
                        $(".qiang-box").hide();
                    }else{  // 如果有抢购价格
                        $(".qiang-box").css('display','flex');
                        $(".putong-box").hide();
                        $(".shijia").html(res.data.gprice.toFixed(2));  // 市场价格，普通价格
                        $(".currency .price").html(res.data.grabPrice.toFixed(2));    // 抢购价格
                        $("#unit2").html(res.data.grabPriceDanwei);
                        if (res.data.grabPriceSecond!=null){
                            $("#tehuijiadiv").show();
                            $(".price3").html(res.data.grabPriceSecond.toFixed(2));    // 抢购价格
                            $("#unit3").html(res.data.grabPriceSecondDanwei);
                        }
                    }


                    document.title = res.data.gname;
                    if(res.data.gkucun==null)
                        $(".kucun").html("未设置");
                    else
                        $(".kucun").html(res.data.gkucun);
                    typeId = res.data.gtypeId;
                    let s = res.data.gdetail;
                    // let s=res.data.gdetail.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                    // 		return `${host}${capture}`
                    // 	});
                    if (res.data.guige == null || res.data.guige == "null" || res.data.guige.length < 1)
                        $(".guigebox").prev().hide();
                    else {
                        let obj = JSON.parse(res.data.guige);
                        for (let i = 0; i < obj.values.length; i++) {
                            let s = `<div class="guige-item" >
                                 <div class="guige-tu">
                                               <img src="${host}/${obj.values[i].img}" />
                                     </div>
                                    <div class="guige">
                                            ${obj.values[i].name}
                                 </div>
                        </div>`;
                            $(".guigebox").append(s);
                        }
                    }

                    $(".Features").html(s);
                    $(".fenlei").html(res.data.goodsType.gname);
                    // 查询推荐商品
                    $.ajax({
                        url: host + "/goods/allTuijian?yuyan=" + localStorage.getItem("yuyan") + "&type=" + typeId,
                        type: "get",
                        success: function (res) {
                            for (let i = 0; i < res.data.length; i++) {
                                let s = `<div class="swiper-slide" onclick="goDetail('${res.data[i].id}')">
						<div class="">
						<div class="goods-item">
						<img src="${host}/${res.data[i].gpicture}" width="90%" class="lunimg">
						<p class="miaoshu">${res.data[i].gjianjie}</p>
						<div class="jiage-sec">
						<div class="jia" data-content-before=":before">${res.data[i].gprice}</div>
						<div class="like"><i class="glyphicon glyphicon-heart-empty"></i></div>
						</div>
						</div>
						</div>
						</div>`;
                                $(".tuijian .swiper-wrapper").append(s);
                                let yuyan = localStorage.getItem("yuyan")
                                if(yuyan=='zh')
                                    $('.jia').attr("data-content-before",'￥');
                                else if(yuyan=='en')
                                    $('.jia').attr("data-content-before",'$');
                                else if(yuyan=='th')
                                    $('.jia').attr("data-content-before",'$');
                                else if (yuyan=='kh'){
                                    $('.jia').attr("data-content-before","$");
                                }
                                let width = $(window).width();
                                // if(width>1000){
                                //     $(".goods-item .lunimg").css("width",'70%')
                                // }
                            }
                            let width = $(window).width();

                                var tuijian = new Swiper('.tuijian', {
                                    slidesPerView: 2,
                                    spaceBetween: 30,
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                })
                        }
                    })
                }
            }
        })

        if(!localStorage.getItem("userid")){	//如果没有userid
            // 生成用户id : user+"时间戳“+”随机数“
            let name= 'user'+new Date().getTime()+Math.round(Math.random()*1000);
            localStorage.setItem('userid',name);
            localStorage.setItem('userName',name);
        }
        userid = localStorage.getItem("userid");
        console.log(userid);
    })
    function pic() {
        $("#pic").trigger("click");
    }

    //上传图片
    var uploadInst = upload.render({
        elem: '#pic'
        , url: '/admin/upload/sendimg' //改成您自己的上传接口
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                // $('#logo').attr('src', result); //图片链接（base64）
            });
        }
        , done: function (res) {
            //判断上传是否成功
            if (res.code == 0) {
                let uname = localStorage.getItem("userName");
                // let obj = {"message": res.data, "type": 2, "sendname": userid, "uname": uname,"ptype":2};
                let obj = null;
                let value = kefu;
                if (kefu==null || kefu=="" || kefu=="undefined"){//客服为空，将区域id传入
                    obj = {"message": res.data, "type": 10, "sendname": userid, "uname": uname,"ptype":2};
                    value=areaId;
                }else{
                    obj = {"message": res.data, "type": 2, "sendname": userid, "uname": uname,"ptype":2};
                }
                let data = {"type": 1, "name": userid, "kefu": value, "msg": obj,"ptype":2};
                websocket.send(JSON.stringify(data));
                addMessage("<img src='/upload/chat/"+res.data+"' style='width: 90%'>",getCurrentDate());
                let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                $(".chat-list").scrollTop(h);
            }else{
                return layer.msg('图片上传失败！');
            }
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
    //消息提示
    function messageHint(){
        $.ajax({
            url:'/chat/getUserHintNumber',
            data:{"username":localStorage.getItem("userName")},
            type:"post",
            success:function (res) {
                console.log(res);
                if (res.data>0){
                    $("#tishi").show();
                    $("#number").html(res.data);
                }else{
                    $("#tishi").hide();
                }
            }
        })
    }
    messageHint();
    tishiMessage = window.setInterval(messageHint,5000);
    // 切换语言
    $(".topbg>.flex>.language").click(function () {
        $(".select-box").show();
        $(".select-box>.language").click(function () {
            let n = $(this).index();
            if (n == 0)
                localStorage.setItem("yuyan", 'zh');// 中文
            else if (n == 1)
                localStorage.setItem("yuyan", 'en');// 英文
            else if (n == 2)
                localStorage.setItem("yuyan", 'th');// 泰语
            else if (n ==3)
                localStorage.setItem("yuyan", 'kh')
            $(".topbg>.flex>.language>img").attr('src', $(this).find('img').attr('src'));
            $(".topbg>.flex>.language>span").html($(this).find('span').html());
            language_pack.loadProperties(n);
            $('.select-box').hide();
        })
    })

    function lianjie() {
        let ho = host.substring(7);
        let uname = localStorage.getItem("userName");
        websocket = new WebSocket("ws:" + ho + "/websocket/" + userid + "/user1" + "/" + uname +"/"+areaId);
        // console.log("lianjie:websocket=="+websocket);
        websocket.onopen = function () {
            heartCheck.reset().start();      //心跳检测重置
            if (!isHistory) {
                let username = userid;
                if (!username.startsWith("+")) {
                    if (!username.startsWith("user")){
                        username = "+" + username;
                    }
                }
                //加载历史聊天
                $.ajax({
                    url: host + "/chat/getHistoryUser",
                    data: {username: username},
                    type: "get",
                    async: false,
                    success: function (res) {
                        isHistory = true;
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].mtype == 1) {
                                if (res.data[i].ptype == 1) {
                                    addMessage(res.data[i].usermsg, res.data[i].time);
                                } else {
                                    addMessage("<img src='/upload/chat/" + res.data[i].picture + "' style='width: 90%'>", res.data[i].time);
                                }
                            } else {
                                var str = "";
                                if (res.data[i].ptype==1){
                                    str = res.data[i].kefumsg;
                                }else{
                                    str = "<img src='/upload/chat/"+res.data[i].picture+"' style='width: 90%'>";
                                }
                                let s = '<div class="time">'+res.data[i].time+'</div><div class="seller"><div class="seller-conent">' + str + '</div></div>';
                                $('.chat-list').append(s);
                                $('.chat-list').find(".seller").last().before("Bocuilian - "+res.data[i].kname);
                                let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                                $(".chat-list").scrollTop(h);
                            }
                        }
                    }
                })
            }
            // let str = "";
            // let yuyan = localStorage.getItem("yuyan")
            // if(yuyan=='zh')
            //     str="服务器连接成功";
            // else if(yuyan=='en')
            //     str="Server connection succeeded";
            // else if(yuyan=='th')
            //     str="เชื่อมต่อเซิร์ฟเวอร์สำเร็จแล้ว";
            // systemMsg(str);
        };
        websocket.onclose = function (e) {
            // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
            // let str = "";
            // let yuyan = localStorage.getItem("yuyan");
            // if(yuyan=='zh')
            //     str="服务器断开连接";
            // else if(yuyan=='en')
            //     str="Server disconnected";
            // else if(yuyan=='th')
            //     str="เซิร์ฟเวอร์ถูกตัดการเชื่อมต่อ";
            // systemMsg(str);
            reconnect();
            // lianjie();
            // let str2 = "";
            // if(yuyan=='zh')
            //     str2="已重新连接";
            // else if(yuyan=='en')
            //     str2="reconnected";
            // else if(yuyan=='th')
            //     str2="เชื่อมต่อใหม่";
            // systemMsg(str2);
            // layer.msg(str2);
        };
        websocket.onmessage = function (event) {
            heartCheck.reset().start();//拿到任何消息都说明当前连接是正常的
            if(event.data!="ping"){
                let obj = JSON.parse(event.data);
                if (obj.type == 4) {
                    let str2 = "";
                    let yuyan = localStorage.getItem("yuyan")
                    if(yuyan=='zh')
                        str2="请重新打开聊天";
                    else if(yuyan=='en')
                        str2="please reopen the chat";
                    else if(yuyan=='th')
                        str2="กรุณาเปิดแชทอีกครั้ง";
                    else if(yuyan=='kh')
                        str2="សូមបើកការជជែកឡើងវិញ";
                    layer.msg(str2, {icon: 2, time: 2000});
                    systemMsg(str2);
                }else if(obj.type == 6){
                    kefu=obj.message;
                } else
                    addMessageFromServer(event.data);
            }

        };
        websocket.onerror = function () {
            let str = "";
            let yuyan = localStorage.getItem("yuyan")
            if(yuyan=='zh')
                str="服务器连接失败";
            else if(yuyan=='en')
                str="Server connection failed";
            else if(yuyan=='th')
                str="การเชื่อมต่อเซิร์ฟเวอร์ล้มเหลว";
            else  if (yuyan=='kh')
                str="ការភ្ជាប់ម៉ាស៊ីនមេបានបរាជ័យ";
            systemMsg(str);
        };
    }

    function reconnect() {
        console.log("重新连接");
        if(lockReconnect) return;
        lockReconnect = true;
        setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
            lianjie();
            lockReconnect = false;
        }, 2000);
    }

    // function socketRest() {
    //     if (websocket.readyState != 1) {
    //         console.log("websocket.readyState=="+websocket.readyState);
    //         // try {
    //         //     if (websocket.readyState != 0 ){ //0 :连接尚未建立
    //         //         websocket.close();
    //         //     }
    //         // } catch (err) {
    //         //     layer.msg(err, {icon: 2, time: 2000});
    //         // } finally {
    //         //     lianjie();
    //         //     var str = "";
    //         //     let yuyan = localStorage.getItem("yuyan")
    //         //     if(yuyan=='zh')
    //         //         str="已重新连接";
    //         //     else if(yuyan=='en')
    //         //         str="reconnected";
    //         //     else if(yuyan=='th')
    //         //         str="เชื่อมต่อใหม่";
    //         //     systemMsg(str);
    //         //     layer.msg(str);
    //         // }
    //     }
    // }

    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    // window.onbeforeunload = function() {
    //     websocket.close();
    // }

    // 显示对话框
    $(".online-msg").click(function () {
        let width = $(window).width();//屏幕宽度
        if (width>1000){
            width=400;
        }
        //弹窗选择区域
        window.parent.layer.open({
            type: 2,
            title:'选择区域',
            area: [width+'px'],
            content: '/home/chooseArea.html',
            btn: ["确定", '关闭'],
            btn1: function(index, layero) {
                //这一行是关键，获取的是子页面的内容，所以可以在子页面将数据绑定在隐藏区域，从而在这个地方获取
                var obj = layero.find("iframe")[0].contentWindow.getAreaId();
                if (obj!=null && obj!=""){
                    window.parent.layer.close(index);
                    areaId = obj;
                    chatBox(obj);
                }else{
                    let yuyan = localStorage.getItem("yuyan");
                    if(yuyan=="zh")
                        layer.msg("请选择您的区域");
                    else if(yuyan=="en")
                        layer.msg("Please select your area");
                    else if (yuyan=="th")
                        layer.msg("กรุณาเลือกภูมิภาคของคุณ");
                    else if (yuyan=='kh')
                        layer.msg("សូមជ្រើសរើសតំបន់របស់អ្នក។");
                }
            },
        });

    });

    function chatBox() {
        if ($("#tishi").css("display")=="block"){
            //将未读的消息改为已读
            $.ajax({
                url:'/chat/useHaveReadMessage',
                data:{"username":userid},
                type:'post',
                success:function (res) {
                    if (res.code==200){
                        $("#tishi").hide();
                    }
                }
            })
        }
        // 如果没有用户名
        if (!localStorage.getItem("userid")) {
            let userid= 'user'+new Date().getTime()+Math.round(Math.random()*1000);
            localStorage.setItem('userid',userid);
            localStorage.setItem('userName',userid);
            // location.href = "login.html";
            location.reload();
            return;
        }
        $(".chat-box").show();
        $('body').css({
            'position': 'fixed',
            "width": '100%',
            'left': 0,
            'top': -$("body").scrollTop() + "px"
        })
        let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
        $(".chat-list").scrollTop(h);
        // 建立对话连接
        if ('WebSocket' in window) {
            lianjie();
            // timer = window.setInterval(socketRest, 1000);
            //定时任务，由于使用nginx反向代理，60秒无数据传输会断开
            // setInterval(function() {
            //     if (websocket.readyState == 1) {
            //         websocket.send("心跳包检测");
            //     } else {
            //         //IM连接已断开
            //     }
            // }, 50 * 1000);
        } else {
            let str = "";
            let yuyan = localStorage.getItem("yuyan")
            if(yuyan=='zh')
                str="你的浏览器不支持在线咨询";
            else if(yuyan=='en')
                str="Your browser does not support online consultation";
            else if(yuyan=='th')
                str="เบราว์เซอร์ของคุณไม่รองรับการให้คำปรึกษาออนไลน์";
            else if (yuyan=='kh')
                str="កម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកមិនគាំទ្រការប្រឹក្សាលើអ៊ីនធឺណិតទេ។";
            layer.msg(str, {time: 2000});
        }
        clearInterval(tishiMessage);
    }

    //心跳检测
    var heartCheck = {
        timeout: 50000,        //50秒发一次心跳
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function () {
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function () {
            var self = this;
            this.timeoutObj = setTimeout(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                websocket.send("ping");
                console.log("ping!");
                self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了
                    console.log("超过一定时间");
                    websocket.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                }, self.timeout)
            }, this.timeout)
        }
    }


    // 关闭对话框
    $(".chat-box .close").click(function () {
        $(this).parents('.chat-box').hide();
        $('body').css({
            'position': 'static',
        });
        // clearInterval(timer);
        // websocket.close();
        // websocket = null;
        location.reload(true);	// 刷新当前页面
    })

    // 添加系统消息
    function systemMsg(msg) {
        var s = '<div class="sys"><div class="sys-content">' + msg + '</div></div>';
        $('.chat-list').append(s);
        let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
        $(".chat-list").scrollTop(h);
    }

    // 添加自己对话消息
    function addMessage(message,timeStr) {
        var s = '<div class="time">'+timeStr+'</div><div class="me"><div class="me-content">' + message + '</div></div>';
        $('.chat-list').append(s);
    }

    // 添加他人对话消息
    // 保存客服姓名
    let kefu = '';
    function addMessageFromServer(message) {
        let obj = JSON.parse(message);
        let s = "";
        if (obj.type == 1) {	// 第一次连接
            var uname = userid;
            if (!uname.startsWith("+")) {
                if (!uname.startsWith("user")){
                    uname = "+" + uname;
                }
            }
            //建立连接后加载历史记录
            if (!isHistory) {
                $.ajax({
                    url: '/chat/getHistoryUser',
                    async: true,
                    data: {kefuname: obj.message, username: uname},
                    success: function (data) {
                        if (data.code == 200) {
                            isHistory = true;
                            var chatList = data.data;
                            for (let i = 0; i < chatList.length; i++) {
                                if (chatList[i].mtype == 1) {
                                    var str = "";
                                    if (chatList[i].ptype==1){
                                        str = chatList[i].usermsg;
                                    }else{
                                        str = "<img src='/upload/chat/"+chatList[i].picture+"' style='width: 90%'>"
                                    }
                                    var s = '<div class="time">'+chatList[i].time+'</div><div class="me"><div class="me-content">' + sr + '</div></div>';
                                    $('.chat-list').append(s);
                                    let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                                    $(".chat-list").scrollTop(h);
                                } else if (chatList[i].mtype == 0 || chatList[i].mtype == 2) {
                                    var str = "";
                                    if (chatList[i].ptype==1){
                                        str = chatList[i].kefumsg;
                                    }else{
                                        str = "<img src='/upload/chat/"+chatList[i].picture+"' style='width: 90%'>"
                                    }
                                    s = '<div class="time">'+chatList[i].time+'</div><div class="seller"><div class="seller-conent">' + str + '</div></div>';
                                    $('.chat-list').append(s);
                                    $('.chat-list').find(".seller").last().before("Bocuilian - "+chatList[i].kname);
                                    // $('.chat-list').find(".seller").last().before(chatList[i].kname);
                                    // $('.chat-list').find(".seller").last().before("Bocuilian");
                                    let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                                    $(".chat-list").scrollTop(h);
                                }
                            }
                            let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                            $(".chat-list").scrollTop(h);
                        }
                    }
                })
            }
            // s = '<div class="seller"><div class="seller-conent">' + '我是客服2:' + obj.message + '</div></div>';
            kefu = obj.message;
        } else if (obj.type == 2) {	// 聊天消息
            var str = "";
            if (obj.ptype==1){//文字信息
                str = obj.message;
                s = '<div class="time">'+getCurrentDate()+'</div><div class="seller"><div class="seller-conent">' + str + '</div></div>';
            }else{
                str = "<img src='/upload/chat/"+obj.message+"' style='width: 90%'>";
                s = '<div class="time">'+getCurrentDate()+'</div><div class="seller"><div class="seller-conent" style="background-color: white">' + str + '</div></div>';
            }
            $('.chat-list').append(s);
            $('.chat-list').find(".seller").last().before("Bocuilian - "+obj.kname);
            var uname = userid;
            if (!uname.startsWith("+")) {
                if (!uname.startsWith("user")){
                    uname = "+" + uname;
                }
            }
            $.ajax({
                url: '/chat/useHaveReadMessage',
                data:{"username":uname},
                async: false,
                type:"post",
                success: function (res) {
                    if (res.code == 500) {
                        layer.msg(res.msg, {icon: 2, time: 2000})
                    }
                }
            })
        } else if (obj.type == 3) {// 客服不在线
            let str = "";
            let yuyan = localStorage.getItem("yuyan");
            if(yuyan=='zh')
                str="客服不在线！";
            else if(yuyan=='en')
                str="Customer service is not online";
            else if(yuyan=='th')
                str="ฝ่ายบริการลูกค้าไม่ออนไลน์";
            else if (yuyan=='kh')
                str="សេវាអតិថិជនមិននៅលើអ៊ីនធឺណិតទេ។";
            s = '<div class="sys"><div class="sys-content">' + str + '</div></div>';
            $('.chat-list').append(s);
        } else if (obj.type == 5) {	// 客服下线
            // s = '<div class="sys"><div class="sys-content">' + '客服' + obj.message + '下线了' + '</div></div>';
            // $('.chat-list').append(s);
        }
        let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
        $(".chat-list").scrollTop(h);
        number=0;
    }

    // 点击发送信息
    function send() {
        var inputText = $("#inputText1");
        if(localStorage.getItem("yuyan")=='en'){
            inputText = $("#inputText2");
        }else if (localStorage.getItem("yuyan")=='th'){
            inputText = $("#inputText3");
        }else if (localStorage.getItem("yuyan")=='kh'){
            inputText = $("#inputText4");
        }
        var msg = inputText.val();
        // type:1 用户给客服
        // type:2 客服给用户
        if (msg.length < 1) {
            let str = "";
            let yuyan = localStorage.getItem("yuyan")
            if(yuyan=='zh')
                str="请输入消息内容";
            else if(yuyan=='en')
                str="Please enter the message content";
            else if(yuyan=='th')
                str="กรุณากรอกเนื้อหาการสอบถาม";
            else if (yuyan=='kh')
                str="សូមបញ្ចូលខ្លឹមសារនៃសារ";
            layer.msg(str);
            return;
        }
        let uname = localStorage.getItem("userName");
        let obj = null;
        let value = kefu;
        if (kefu==null || kefu=="" || kefu=="undefined"){//客服为空，将区域id传入
            obj = {"message": msg, "type": 10, "sendname": userid, "uname": uname,"ptype":1};
            value=areaId;
        }else{
            obj = {"message": msg, "type": 2, "sendname": userid, "uname": uname,"ptype":1};
        }
        let data = {"type": 1, "name": userid, "kefu": value, "msg": obj,"ptype":1};
        websocket.send(JSON.stringify(data));
        addMessage(msg,getCurrentDate());        //
        inputText.val("");
        let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
        $(".chat-list").scrollTop(h);
    }

    // 跳转到详情
    function goDetail(id) {
        window.location = './goodsdetail.html?id=' + id;
    }

    // 修改商品数量


    // 重新渲染价格
    function resetJiage(n) {
        if (n >= $(".price-row3>div[data-range]").last().attr("data-range")) {
            $(".price-row3>div[data-range]").find('.item').addClass("dis");
            $(".price-row3>div[data-range]").find('.item:last').html("-");
            $(".price-row3>div[data-range]").last().find('.item').removeClass('dis');
            $(".price-row3>div[data-range]").last().find('.item:last').html(n);
            return;
        }
        $(".price-row3>div[data-range]").each(function () {
            if (n >= $(this).attr("data-range") && n < $(this).next().attr("data-range")) {
                $(this).find('.item').removeClass('dis');
                $(this).find('.item:last').html(n);
            } else {
                $(this).find('.item').addClass('dis');
                $(this).find('.item:last').html('-');
            }
        });

    }

    // 搜索
    $(".searchBtn").click(function () {
        let s = $(".searchName").val();
        if (s.length < 1) {
            let str = "";
            let yuyan = localStorage.getItem("yuyan")
            if(yuyan=='zh')
                str="请输入消息内容";
            else if(yuyan=='en')
                str="Please enter the message content";
            else if(yuyan=='th')
                str="กรุณากรอกเนื้อหาการสอบถาม";
            else if (yuyan=='kh')
                str="សូមបញ្ចូលខ្លឹមសារនៃសារ";
            layer.msg(str);
        } else {
            window.location = './goodslist.html?gname=' + s;
        }
    })
    $(function () {
        document.title = "GoodsDetail"
    });

    $(".online-pay").click(function () {

        let width = $(window).width();//屏幕宽度
        if (width>1000){
            width=400;
        }
        //弹窗选择区域
        window.parent.layer.open({
            type: 2,
            title:'选择区域',
            area: [width+'px'],
            content: '/home/chooseArea.html',
            btn: ["确定", '关闭'],
            btn1: function(index, layero) {
                //这一行是关键，获取的是子页面的内容，所以可以在子页面将数据绑定在隐藏区域，从而在这个地方获取
                var obj = layero.find("iframe")[0].contentWindow.getAreaId();
                if (obj!=null && obj!=""){
                    window.parent.layer.close(index);
                    qrcodeshow(obj);
                }else{
                    let yuyan = localStorage.getItem("yuyan");
                    if(yuyan=="zh")
                        layer.msg("请选择您的区域");
                    else if(yuyan=="en")
                        layer.msg("Please select your area");
                    else if (yuyan=="th")
                        layer.msg("กรุณาเลือกภูมิภาคของคุณ");
                    else if (yuyan=='kh')
                        layer.msg("សូមជ្រើសរើសតំបន់របស់អ្នក។");
                }
            },
        });

    });

    function qrcodeshow(area) {
        let yuyan = localStorage.getItem("yuyan")
        let width = $(window).width();//屏幕宽度
        let height = $(window).height();//屏幕高度
        if (width>1000){
            width=421;
            height=774;
        }
        var title = "扫码支付";
        var tishi = "ขณะนี้ไม่สามารถชำระเงินได้ในภูมิภาคนี้ โปรดเลือกภูมิภาคอื่น";
        if(yuyan=='zh'){
            title = "扫码支付";
            tishi = "此区域暂时不支持付款，请选择其他区域";
        } else if(yuyan=='en'){
            title = "pay";
            tishi = "Payment is not currently available in this region, please select another region";
        } else if(yuyan=='th'){
            title = "จ่ายเงิน";
            tishi = "ขณะนี้ไม่สามารถชำระเงินได้ในภูมิภาคนี้ โปรดเลือกภูมิภาคอื่น";
        } else if(yuyan='kh'){
            title = "ស្កេនលេខកូដដើម្បីបង់ប្រាក់";
            tishi = "ការទូទាត់មិនមាននាពេលបច្ចុប្បន្ននៅក្នុងតំបន់នេះទេ សូមជ្រើសរើសតំបន់ផ្សេងទៀត។";
        }
        var imgHtml = "<div><img src='/home/img/qrcodelak.png' width='50%'/><img src='/home/img/qrcodecny.png' width='50%'/>" +
            "<img src='/home/img/qrcodethb.png' width='50%'/><img src='/home/img/qrcodeusd.png' width='50%'/></div>";
        if (area=="1497246935237681154"){
            imgHtml = "<div style='background-color: white;width: 100%;height: 100%;text-align: center;display: flex'><span style='color: red;margin: auto' data-lang='notqrcode'>"+tishi+"</span></div>"
        }
        //弹出层
        //952 1548
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px', height + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            // area: ['47.2%','64.3%'],
            // area: ['95%','95%'],
            shadeClose: true,
            scrollbar: false,
            title: title, //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

    //获取当前时间
    function getCurrentDate(){
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var str=y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+'  '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(s<10?('0'+s):s);
        return str;
    }
</script>
</html>
